<template>
  <el-row class="data-lists">
    <el-col :span="9" :class="{ shake: disabled }">
      <div class="data-item-one flx-row">
        <div class="item-left">
          <img src="../../assets/home.png" alt="" srcset="" />
        </div>
        <div class="item-right">
          <div class="item-right-top">
            <div class="tit mt-2">总销售量SV</div>
            <div class="num">{{ countAll.total }}</div>
          </div>
          <div class="line"></div>
          <div class="item-right-bottom flx-row">
            <div class="item" v-for="(item, index) of countAll.list" :key="item.id">
              <div class="tit">药品编号：{{ item.id }}</div>
              <div class="num">{{ item.total }}</div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
    <el-col :span="15" :class="{ shake: disabled }">
      <div class="data-item-two">
        <div class="item">
          <div class="item-des flx-row">
            <img src="../../assets/icon1.png" alt="" />
            <div class="right">
              <div class="num">{{ dau.today }} <span>{{ dau.today - dau.yesterday }}</span></div>
              <div class="txt">今日DAU</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item-des flx-row" style="margin-right: 0px">
            <img src="../../assets/icon2.png" alt="" />
            <div class="right">
              <div class="num">{{ pvData.pv }} <span>{{ pvData.pv - pvData.yesPv }}</span></div>
              <div class="txt">今日PV</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item-des flx-row">
            <div class="right border-right-1px">
              <div class="num">{{ dau.yesterday }}</div>
              <div class="txt">昨日DAU</div>
            </div>
            <div class="right">
              <div class="num">{{ totalUserNum }}</div>
              <div class="txt">总用户数</div>
            </div>
          </div>
        </div>
        <div class="item">
          <div class="item-des flx-row" style="margin-right: 0px">
            <div class="right border-right-1px">
              <div class="num">{{ pvData.yesPv }}</div>
              <div class="txt">昨日PV</div>
            </div>
            <div class="right">
              <div class="num">{{ pvData.totalPv }}</div>
              <div class="txt">PV总数</div>
            </div>
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
  <el-row class="dataLayer">
    <el-col :span="18">
      <div class="flx-row">
        <div class="datalayer-echarts" :class="{ shake: disabled }">
          <GMVnearly></GMVnearly>
        </div>
        <div class="datalayer-echarts" :class="{ shake: disabled }">
          <linenearly></linenearly>
        </div>
      </div>
      <div class="table-data" :class="{ shake: disabled }">
        <div class="tit" style="display: flex; display:table;">
          <div class="block" style="display:table-cell; width: 40%; height: 40px;">
            <el-date-picker v-model="value1" type="daterange" range-separator="To" start-placeholder="2022-01-01"
              end-placeholder="2023-12-31" @change="dateChange" value-format="YYYY-MM-DD" />
          </div>
          <div class="mt-4" style="display:table-cell; width: 60%; height: 40px;">
            <el-input v-model="content" placeholder="请输入检索内容" class="input-with-select">
              <template #prepend>
                <el-select v-model="search" placeholder="Select" style="width: 115px">
                  <el-option label="药品名称" value="1" />
                  <el-option label="商品编号" value="2" />
                  <el-option label="社保卡号" value="3" />
                </el-select>
              </template>
              <template #append>
                <el-button :icon="Search"  @click="searchRecord()"/>
              </template>
            </el-input>
          </div>
        </div>
        <div class="table-box">
          <el-table :data="tableData" :header-cell-style="{
            background: '#FAFBFDFF',
            fontWeight: '400',
            fontSize: '14px',
            padding: '0',
            fontHeight: '36px',
            height: '36px',
          }" :row-style="{
  fontWeight: '400',
  fontSize: '14px',
  padding: '0',
  fontHeight: '44px',
  height: '44px',
}">
            <el-table-column v-for="item in options" :key="item.type" :prop="item.props" :label="item.label"
              :width="item.width" :align="item.align" show-overflow-tooltip :fixed="item.fixed">
            </el-table-column>
            <el-table-column label="操作">
              <template #default="props">
                <el-button type="danger" plain  @click="modifyClick(props.row)" size="small">
                  修改
                  <!-- 点击"修改"按钮，触发modifyClick事件，同时传参 -->
                </el-button>
                <span class="dialog-footer"><el-button @click="handleDelete(props.row)" plain type="primary" size="small">
                  移除
                </el-button>
              </span>
                
                <!-- <el-button @click="centerDialogVisible = true">
            
          </el-button> -->
              </template>

            </el-table-column>
          </el-table>
          <el-dialog v-model="centerDialogVisible" title="修改" width="30%" align-center>
            <template #footer>
              <el-form v-model="formData1" label-width="80px">
                <el-form-item label="日期">
                  <el-input v-model="formData1.date"></el-input>
                </el-form-item>
                <el-form-item label="药品名称">
                  <el-input v-model="formData1.name"></el-input>
                </el-form-item>
                <el-form-item label="药品销量">
                  <el-input v-model="formData1.total"></el-input>
                </el-form-item>
                <el-form-item label="社保卡号">
                  <el-input v-model="formData1.number"></el-input>
                </el-form-item>
                <el-form-item label="药品编号">
                  <el-input v-model="formData1.code"></el-input>
                </el-form-item>
                <el-form-item label="销售额">
                  <el-input v-model="formData1.receivable"></el-input>
                </el-form-item>
              </el-form>
              <span class="dialog-footer">
                <el-button type="danger" plain @click="handleModify()">确认</el-button>
                <el-button type="primary" plain @click="centerDialogVisible = false">
                  取消
                </el-button>
              </span>
            </template>
          </el-dialog>
        </div>
        <div style="display: flex;justify-content: center;margin-top: 10px">
          <el-pagination background @size-change="sizeChange" @current-change="currentChange"
            :current-page="pageInfoData.currentPage" :page-size="pageInfoData.pageSize"
            layout="sizes, prev, pager, next, jumper, ->, total, slot" :total="total">
          </el-pagination>
        </div>
      </div>
    </el-col>
    <el-col :span="6">
      <div class="data-item-three" :class="{ shakeRight: disabled }">
        <div class="tit">常用功能</div>
        <div class="content">
          <div class="item" @click="handlePush(item)" v-for="(item, index) of commonUse" :key="index">
            <div class="item-data flx-row">
              <div class="tit">
                <el-icon>
                  <Promotion />
                </el-icon>{{ item.name }}
              </div>
              <el-icon class="icon">
                <ArrowRight />
              </el-icon>
            </div>
          </div>
        </div>
      </div>
      <div class="notice">
        <div class="notice-news">
          <img src="../../assets/homebg.jpeg" alt="" />
        </div>
      </div>
      <div class="data-item-three" :class="{ shakeRight: disabled }">
        <div class="tit">医疗市场</div>
        <div class="notice-lists">
          <div class="item one-cut-txt" @click="handlePushNews(item)" v-for="item in notList" :key="item.id">
            <span class="type">资讯</span> {{ item.text }}
          </div>
        </div>
      </div>
    </el-col>
  </el-row>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import GMVnearly from './components/GMVnearly.vue'
import linenearly from './components/linenearly.vue'
import { options } from './options.js'
import {ElNotification} from 'element-plus'
import {
  noticeLists, getDau,
  getUserCount, getCountAll, getPvNum
} from '../../api/modules/index.js'
import { Flag, Search } from '@element-plus/icons-vue'
import { homeList1 } from '../../api/modules/echart'
import { deleteRecordById,updateRecord } from '../../api/modules/salerecords'

import router from '../../router'
const search=ref('1')
const content=ref('')
const handleModify = async()=>{
  console.log(formData1);
  let res = await updateRecord(formData1);
  if (res.data.data > 0) {
        ElNotification.success("修改成功")
    } else {
        ElNotification.error("修改失败")
    }
  centerDialogVisible.value = !centerDialogVisible.value;
  getPage()
  
}
const centerDialogVisible = ref(false)
const tableData = ref([])
const dau = reactive({
  today: 0,
  yesterday: 0
})
const modifyDiaglog = async () => {

  console.log("---------------");
 centerDialogVisible.value = !centerDialogVisible.value;
}
const modifyClick = (row) => {
  // console.log(row.centerDialogVisible);
  formData1.id=row.id;
  formData1.code=row.code;
  formData1.number=row.number;
  formData1.total=row.total;
  formData1.name=row.name;
  formData1.date=row.date;
  formData1.receivable=row.receivable;
  modifyDiaglog();

}
const searchRecord =()=>{

  
  if(content.value===''){
    console.log('123----')
    pageInfoData.value.content=content.value
    pageInfoData.value.flag =search.value
    getPage()
  }else{
    pageInfoData.value.content=content.value
    pageInfoData.value.flag =search.value
    console.log(pageInfoData);
    
    getPage()
  }
}
const handleDelete = async (row) => {
  console.log(row.id);
  let res = await deleteRecordById(row.id);
  if (res.data.data > 0) {
        ElNotification.success("删除成功")
    } else {
        ElNotification.error("删除失败")
    }
  console.log(res);
 // window.alert("删除成功");
  getPage()
}
const formData1 = reactive(
  {
      date: "2022-02-01",
      code: 1,
      number: 2,
      name: '银翘片',
      total: 3,
      receivable: 4
  }
)
const formData = reactive(
  {
    form: {
      id: '',
      date: "2022-02-01",
      code: 1,
      number: 2,
      name: '银翘片',
      total: 3,
      receivable: 4
    }
  }
)
const notList = reactive([
  {
    text: '从200亿到13000亿！ 中国已为全球第二大医疗器械市场',
    url: 'http://stock.10jqka.com.cn/20230712/c648794789.shtml'
  },
  {
    text: '医药主题回归！机构密集叩门医疗健康板块 富达、高盛、红杉、中欧出动',
    url: 'https://finance.eastmoney.com/a/202307162782231190.html'
  },
  {
    text: '九安医疗预计上半年净利下降超93%，称加快糖尿病诊疗照护新模式',
    url: 'https://baijiahao.baidu.com/s?id=1771399378680616348&wfr=spider&for=pc'
  },
  {
    text: '高值医用耗材市场加速重构：国产企业能否抓住集采机遇逆袭？',
    url: 'https://finance.eastmoney.com/a/202307142781520366.html'
  },
  {
    text: '「市场前瞻」2023年全球精准医疗行业市场现状及区域竞争格局分析',
    url: "https://baijiahao.baidu.com/s?id=1771295365510710703&wfr=spider&for=pc"
  },
  {
    text: '检测试剂龙头九安医疗风光不再 上半年净利预计下滑超90%',
    url: "http://finance.china.com.cn/stock/20230715/6009640.shtml"
  },
  {
    text: '华人健康再度出手抢占市场，医药零售行业“圈地战”白热化',
    url: "http://k.sina.com.cn/article_1838672663_6d97eb1702001e2b7.html"
  },
  {
    text: '市场规模不断扩大 高端医疗装备国产化提速',
    url: "http://news.cctv.com/2023/07/03/ARTIGFEhYCoBZrmynE5Wlcx4230703.shtml"
  }
])
const handlePushNews = (item) => {
  window.location.href = item.url
}
const commonUse = ref(JSON.parse(sessionStorage.getItem("commonUse")))
const totalUserNum = ref(0)
const disabled = ref(false)
const value1 = ref('')
const handlePush = (to) => {
  router.push(to.path)
}
const dateChange = () => {
  pageInfoData.value.start = value1.value[0];
  pageInfoData.value.end = value1.value[1];
  getPage();
}
const total = ref()
const pageInfoData = ref({
  currentPage: 1,
  pageSize: 5,
  start: '2022-01-01',
  end: '2023-12-31',
  content: content.value,
  flag: search.value
})

const initData = () => {
  getPage()
  getDauData()
  getUserCountNum()
  getCountAllNum()
  getPvNumInfo()
}

const getPage = async () => {
  let res = await homeList1(pageInfoData.value)
  total.value = res.data.data.total
  tableData.value = res.data.data.records
}
const sizeChange = (val) => {
  pageInfoData.value.pageSize = val;
  getPage()
}
const currentChange = (val) => {
  pageInfoData.value.currentPage = val;
  getPage()
}
const getDauData = async () => {
  let res = await getDau()
  dau.today = res.data.data.today
  dau.yesterday = res.data.data.yesterday
}
const getUserCountNum = async () => {
  let res = await getUserCount()
  totalUserNum.value = res.data.data
}
const countAll = reactive({
  list: [],
  total: 0
})
const getCountAllNum = async () => {
  let res = await getCountAll()
  countAll.list = res.data.data.saleList
  countAll.total = res.data.data.total
}
const pvData = reactive({
  pv: 0,
  yesPv: 0,
  totalPv: 0
})
const getPvNumInfo = async () => {
  let res = await getPvNum()
  pvData.pv = res.data.data.pv
  pvData.yesPv = res.data.data.yesPv
  pvData.totalPv = res.data.data.totalPv
}
onMounted(() => {
  initData()
  disabled.value = true
  setTimeout(() => {
    disabled.value = false
  }, 1500)
})
</script>

<style lang="scss" scoped>
.demo-date-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}

.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}

.demo-date-picker .block:last-child {
  border-right: none;
}

.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
@import './index.scss';
</style>
